<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta charset="UTF-8">
	<title>邮箱验证</title>
</head>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/normalize.css">
<body>
	<div class="loginbg">
		<div class="login_title">Smart Outdoor Service</div>
		<div class="login">
			<form action="" id="registerForm">
				<div class="loginbox">
					<span>邮箱地址：</span><span class="fr usererr"> </span>
					<input type="text" name="userName" class="confirm" placeholder="请输入邮箱账号">
				</div>
				<div class="loginbox clearfix">
					<span>验证码：</span><span class="fr pwderr"> </span>
					<div class="IDcodebox clearfix">
						<input type="text" name="IDcode" class="confirm" id="IDcode"  placeholder="请输入验证码">
						<img src="images/IDcode.png" alt="">
					</div>
				</div>
				<a href="newpsw.html" class="confirmbtn a_btn loginbtn">下一步</a>
			</form>
		</div>
		
	</div>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
	var strategies = {
		isNonEmpty:function(value,errorMsg){
			if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(value)){
				return errorMsg;
			}
		},
		// Length:function(value,length,errorMsg){
		// 	if(value.length!=length){
		// 		return errorMsg;
		// 	}
		// },
		// isMobile:function(value,errorMsg){
		// 	if(!/^1[3|5|8][0-9]{9}$/.test(value)){
		// 		return errorMsg;
		// 	}
		// },
		Len:function(value,errorMsg){
			if(!/^\w{4,9}$/.test(value)){
				return errorMsg;
			}
		},
		// isConfirm:function(value,errorMsg){
		// 	var convalue =document.getElementById("IDcode").value;
		// 	if(value!==convalue){
		// 		return errorMsg;
		// 	}
		// },
	};
//执行
var todoFunc = function(userInf){
	var validator = new Validator();
	//*****添加校验规则******//
	if(userInf=='userName'){
		validator.add(registerForm.userName,'isNonEmpty','请输入正确的邮箱账号');
	}else if(userInf=='IDcode'){
		// validator.add(registerForm.phoneNum,'isMobile','手机号码格式不正确');
		validator.add(registerForm.IDcode,'Len','验证码格式错误');
	}
	// validator.add(registerForm.IDcode,'Length:6','密码长度为6位');
	// validator.add(registerForm.confirmpsw,'isConfirm','密码不一致');
	//收集报错信息
	var errorMsg = validator.start();
	return errorMsg;
}
var registerForm = document.getElementById('registerForm');

$("input[name='userName']").blur(function(){
	var errorMsg = todoFunc('userName');
	if(errorMsg){
		$(".loginbox .usererr").html(errorMsg);
		return false;
	}
});
$("input[name='userName']").focus(function(){
	$(".loginbox .usererr").html("");
});
$("input[name='IDcode']").blur(function(){
	var errorMsg = todoFunc('IDcode');
	if(errorMsg){
		$(".loginbox .pwderr").html(errorMsg);
		return false;
	}
});
$("input[name='userName']").focus(function(){
	$(".loginbox .usererr").html("");
});
var Validator = function(){
	this.cache = [];
};
Validator.prototype.add = function(dom,rule,errorMsg){
	var arr = rule.split(":");
	//这块是重点
	this.cache.push(function(){
	//拿出策略字串备用
	var strategy = arr.shift();
	//拼接形参
	//将dom值放在数组头一个
	arr.unshift(dom.value);
	//报错信息放在数组最后一个
	arr.push(errorMsg);
	//apply的妙手回春
	return strategies[strategy].apply(dom,arr);
});
};
Validator.prototype.start = function(){
	for(var i=0;i<this.cache.length;i++){
		var msg = this.cache[i]();
		if(msg)
			return msg;
	}
};
</script>
</html>